<template>
    <div class="realName">
        <div class="top">
            <el-breadcrumb separator=">">
                <el-breadcrumb-item  class="font-gray hand" :to="{ path: 'index' }">个人信息</el-breadcrumb-item>
                <el-breadcrumb-item class="hand font-white">实名认证</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <el-form ref="bankForm" :rules='rules' hide-required-asterisk :model="form" label-width="160px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" ></el-input>
                </el-form-item>
                <el-form-item label="银行卡号" prop="bank">
                    <el-input v-model="form.bank" ></el-input>
                </el-form-item>
                 <el-form-item label="证件号:(限身份证)" prop="certificationNumber">
                    <el-input v-model="form.certificationNumber" ></el-input>
                </el-form-item>
                <el-form-item label="预留手机号" prop="phone">
                    <el-input v-model="form.phone" ></el-input>
                </el-form-item>
               <el-form-item label="验证码" prop="verifyCode">
                        <el-input  prefix-icon="" class="code"  v-model="form.verifyCode"   placeholder="输入验证码">              
                            <el-button slot="append"
                                v-if="!countDown"
                                class="verification "                   
                                @click.prevent="getVerify()"
                                style="color:#fff;">
                                获取验证码
                                </el-button>
                                <el-button slot="append"
                                v-else
                                class="verification ">   
                                已发送({{countDown}}s)
                                </el-button>
                        </el-input>
                </el-form-item> 
                
                <el-form-item>
                    <el-button class="btn-add" @click="goRealName('bankForm')">立即实名</el-button>
                </el-form-item>
            </el-form>

        </div>

            
      
    </div>
</template>

<script>
import {regPhone} from '@/assets/js/rule'
import {getRealAuth,getVerifyCode} from '@/ajax/index'
export default {
    name:'realName',
    data(){
        return{
            countDown:0,
            form:{
                name:'',
                bank:'',
                phone:'',
                certificationNumber:'',
                verifyCode:''
            },
            rules: {
                name:[
                    {required: true, message: '请输入手机号', trigger: ['blur','change']},
                ],
                bank:[
                    {required: true, message: '请输入银行卡号', trigger: ['blur','change']},
                ],
                certificationNumber:[
                    {required: true, message: '请输入证件号', trigger: ['blur','change']},
                ],
                phone:[
                     {required: true, message: '请输入手机号码', trigger: ['blur','change']},
                ],
                verifyCode:[
                    {required: true, message: '验证码', trigger: ['blur','change']},
                ],
            }
        }
    },
    methods:{
           async goRealName(formName){
            const valid =  this.$refs[formName].validate();
            valid.then((response) => {
                const param = {
                  'customerId':this.$store.state.userId, 
                  'name': this.form.name, // 真实名字
                  'bankcardNumber':this.form.bank, //银行卡号
                  'phone': this.form.phone,  //手机号
                  'verificationCode': this.form.verifyCode,             // 验证码   
                  'certificationType':'identitycard', // 证件类型
                  'certificationNumber':this.form.certificationNumber, // 证件号码
                }
                const result =  getRealAuth(param)  //实名接口调用
                result.then((result) => {
                    if(result.code === '200' && result.data.state === '1'){
                        this.$alert('实名成功!','富易')
                    }else{
                        this.$alert(result.data.message,'富易')
                    }
                }).catch((error)=>{
                        this.$alert('网络忙,请稍后再试!','富易')
                })
            
            })          
                     
        },
        // @description: 获取短信验证码 
        async getVerify() {
                if(!regPhone(this.form.phone)){
                    this.$alert('请输入正确的手机号','富易')
                    return false
                }             
                const param = {'phoneNum': this.form.phone}
                let result = await getVerifyCode(param);
                if(result.code === '200' && result.data.state === '1'){
                    this.form.verifyCode = result.data.data;                       
                }else{
                    this.$alert(result.data.message,'富易')                       
                    return false;
                }
                this.countDown = 60;
                this.intervalId = setInterval(() => {
                    this.countDown--;
                    // 判断
                    if (this.countDown === 0) {
                        clearInterval(this.intervalId);
                    }
                }, 1000);
               
        }
    }
}
</script>
<style>

.realName .el-breadcrumb{display: inline-block;font-size: 14px;line-height: 46px;}
.realName .el-breadcrumb__inner,.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover{color: #72739c!important;}
.realName .el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{color: #fff!important;cursor: pointer!important;}
.realName .el-form-item__label{color: #c3c4ea;padding-right: 20px;} 
.realName .el-input__inner{background-color: #242645;border: none;border-radius: 4px;text-align: right;color: #fff;}
.realName .code .el-input__inner{text-align: left;}
.realName .el-input-group__append{background-color: #242645;border: none;border-left:1px solid;}
</style>


<style lang="less" scoped>
.realName{
    margin-top: 60px;
    .el-form{width: 500px;margin: 20px auto; margin-left: calc(50% - 340px);}
    .btn-add{display: block;width: 100%;text-align: center;border-radius: 4px;
    background: -webkit-linear-gradient(left, #77e0f7 ,#29a8d1); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #77e0f7,#29a8d1) ;/* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #77e0f7,#29a8d1); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #77e0f7 , #29a8d1); /* 标准的语法 */
    }
}
</style>


